@charset "utf-8";
/* CSS Document */

/* =========全局样式======= */
html{
    overflow-x:hidden;
}
html, body, div, p, a, ol, ul, li, dl, dt, dd, h1, h2, h3, h4,h5,h6,img, object, embed, span, form, marquee{margin:0;padding:0;}
body{font-size:12px;font-family:微软雅黑,宋体,Arial, Helvetica, sans-serif;color:#555; line-height:1.7; background: #fff;}
ol, ul, li, dl, dt, dd{list-style:none;}
img{border:none;}
p{text-justify:inter-ideograph;}
/*table{border:0px;border-collapse:collapse;border-spacing:0px;}*/
em,i{ font-style:normal;}
a {text-decoration:none;color:#555;transition:all 0.3s ease-out 0s;}
/*a:link,a:visited{}*/
a:hover {color:#3caf64;text-decoration: none;}


/* =========基本样式======= */

h1{font-size:30px;font-weight:700;}
h2{font-size:24px;font-weight:700;}
h3{font-size:18px;font-weight: bold;}
h4{font-size:16px;font-weight:normal;}
h5{font-size:14px;}
h6{font-size:12px;font-weight:normal;}


/*=======内容区域==========*/
.w{width:1200px; margin:0 auto;}
.wrapper{width:1080px; margin:0 auto;}
.i-w{width:1050px;margin:0 auto;}

/*======浮动=====*/
.left{float:left;}
.right{float:right;}

/*======清除浮动=====*/
.clearfix:after{
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}

/*
    文字超出用省略号...
*/
.text-overflow{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
}
img{
    max-width: 100%;
}


/*======通用样式=====*/
.p10{padding:10px;}
.p20{padding:20px;}
.p30{padding:30px;}
.pt10{padding-top:10px;}
.pt20{padding-top:20px;}
.pt30{padding-top:30px;}
.pt40{padding-top:40px;}
.pt50{padding-top:50px;}


.ptb10{padding:10px 0;}
.ptb20{padding:20px 0;}
.ptb30{padding:30px 0;}
.ptb40{padding:40px 0;}
.ptb50{padding:50px 0;}
.ptb80{padding:80px 0;}
.ptb100{padding:100px 0;}

.m10{margin:10px;}
.m20{margin:20px;}
.m30{margin:30px;}
.mt10{margin-top:10px;}
.mt20{margin-top:20px;}
.mt30{margin-top:30px;}
.mt40{margin-top:40px;}
.mt50{margin-top:50px;}

.mtb10{margin:10px 0;}
.mtb20{margin:20px 0;}
.mtb30{margin:30px 0;}
.mtb40{margin:40px 0;}
.mtb50{margin:50px 0;}

.text-left{text-align:left;}
.text-right{text-align:right;}
.text-center{text-align:center;}
.text-uppercase {text-transform:uppercase;}

.bgcfff{background-color:#fff;}
.bgceee{background-color:#eee;}
.bgcddd{background-color:#ddd;}
.bgc333{background-color:#333;color:#fff;}
.bgc000{background-color:#000;color:#fff;}

.rounded3{border-radius:3px;}
.rounded5{border-radius:5px;}
.rounded10{border-radius:10px;}

/*
    图片不规则背景
*/
.img-bgc{
    transform: skew(-6deg);
    border:15px solid transparent;
    display: block;
    position: relative;
}
.img-bgc img{
    position: relative;
    z-index: 2;
}
.img-bgc:before,.img-bgc:after{
    content: '';
    position: absolute;
    z-index: 1;
    display: block;
    width:50%;
    background: #3caf64;
    height:50%;
}
.img-bgc:before{
    right:-15px;
    top:-15px;
}
.img-bgc:after{
    left:-15px;
    bottom: -15px;
}


/*
    产品图片不规则背景
*/
.img-item_bgc{
    transform: skew(-3deg);
    border:10px solid transparent;
}
.img-item_bgc:before,.img-item_bgc:after{
    width:25%;
    height:25%;
}
.img-item_bgc:before{
    right:-10px;
    top:-10px;
}
.img-item_bgc:after{
    left:-10px;
    bottom: -10px;
}


/*======图片放大=====*/

li.img-list{
    float: left;
}
li.img-list .img{
    overflow: hidden;
}
li.img-list .img img{
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
    width:100%;
    height:100%;
}
li.img-list:hover .img img {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

/*
    更多按钮 通用样式01
*/

.more1{
    text-align: center;
    margin:20px 0 0 0;
}
.more1 a{
    font-size: 14px;
    background: #fff;
    color: #444;
    transition: all 0.3s;
    display: inline-block;
    box-shadow: 0 2px 10px rgba(0,0,0,.1);
}

.more1 a i{
    background: #3caf64;
    color: #fff;
    font-size: 15px;
    height:36px;
    width:36px;
    vertical-align: top;
    line-height:36px;
}
/*
   更多按钮 通用样式02
*/

.more2 a{
    background:#262626;
    display: inline-block;
    color:#333;
    width:360px;
    height:52px;
    line-height:50px;
    font-size: 16px;
    position: relative;
    transition: .3s;
    text-transform: uppercase;
    border: 1px solid #262626;
    text-align: center;
}
.more2 a i{
    transition: .3s;
    opacity:0;
}
.more2 a:hover{
    background: #4ab344;
    color: #444;
    border: 1px solid #4ab344;
}
.more2 a:hover i{
    opacity:1;
    margin:0 0 0 20px;
}